<template>
  <div class="catalogue">
    <el-form
      label-width="20px"
      :model="form_1"
      label-position="right"
      class="class-form"
    >
      <el-row>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-form-item>
            <el-select
              v-model="form_1.type"
              style="width: 100%"
              clearable
              :placeholder="$t('query.请选择查询类型')"
            >
              <el-option label="sku" value="sku"> </el-option>
              <el-option :label="$t('catalogue.ProductCN')" value="ProductCN">
              </el-option>
              <el-option :label="$t('catalogue.ProductMX')" value="ProductMX">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-form-item>
            <el-input
              v-model="form_1.value"
              clearable
              :readonly="!form_1.type"
              style="width: 100%"
              :placeholder="form_1.type"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-form-item>
            <el-button type="primary" @click="getDataList(2)">{{
              $t("form.queryBtn")
            }}</el-button>
            <el-button type="primary" @click="modelShow = true">{{
              $t("form.addBtn")
            }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="table-container">
      <el-table border :data="tableData">
        <el-table-column
          prop="sku"
          :label="$t('catalogue.sku')"
          minWidth="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="ProductCN"
          :label="$t('catalogue.ProductCN')"
          minWidth="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="ProductMX"
          :label="$t('catalogue.ProductMX')"
          minWidth="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="variantes"
          :label="$t('catalogue.variantes')"
          minWidth="100"
          align="center"
        >
          <template slot-scope="scope">
            {{
              scope.row.variantes
                ? scope.row.variantes == "N"
                  ? "否"
                  : "是"
                : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          :label="$t('catalogue.state')"
          minWidth="100"
          align="center"
        >
          <template slot-scope="scope">
            {{
              scope.row.state
                ? scope.row.state == "N"
                  ? $t("query.否")
                  : $t("query.是")
                : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          :label="$t('catalogue.price')"
          minWidth="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="position"
          :label="$t('catalogue.position')"
          minWidth="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          :label="$t('catalogue.remark')"
          minWidth="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :label="$t('catalogue.operate')"
          align="center"
          fixed="right"
          width="100"
        >
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              type="text"
              size="small"
              >{{ $t("form.editBtn") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.start"
        background
        :page-sizes="[10, 100, 200, 300, 400]"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      width="600px"
      :title="editForm.xn_id ? '编辑' : '新增'"
      top="50px"
      :close-on-click-modal="false"
      :visible.sync="modelShow"
    >
      <el-form
        ref="formRef"
        :model="editForm"
        :rules="rules"
        label-position="top"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('catalogue.sku')" prop="sku">
              <el-input
                v-model="editForm.sku"
                :placeholder="$t('catalogue.sku')"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('catalogue.state')" prop="state">
              <el-select
                style="width: 100%"
                v-model="editForm.state"
                :placeholder="$t('catalogue.state')"
              >
                <el-option :label="$t('query.在售')" value="Y"> </el-option>
                <el-option :label="$t('query.不在售')" value="N"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('catalogue.price')" prop="price">
              <el-input
                :placeholder="$t('catalogue.price')"
                v-model="editForm.price"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('catalogue.ProductCN')" prop="ProductCN">
              <el-input
                :placeholder="$t('catalogue.ProductCN')"
                v-model="editForm.ProductCN"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('catalogue.ProductMX')" prop="ProductMX">
              <el-input
                :placeholder="$t('catalogue.ProductMX')"
                v-model="editForm.ProductMX"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('catalogue.position')" prop="position">
              <el-input
                :placeholder="$t('catalogue.position')"
                v-model="editForm.position"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item :label="$t('catalogue.remark')" prop="remark">
              <el-input
                :placeholder="$t('catalogue.remark')"
                v-model="editForm.remark"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('catalogue.variantes')" prop="variantes">
              <el-select
                style="width: 100%"
                v-model="editForm.variantes"
                :placeholder="$t('catalogue.variantes')"
              >
              <!-- $t('query.否') : $t('query.是') -->
                <el-option :label="$t('query.是')" value="Y"> </el-option>
                <el-option :label="$t('query.否')" value="N"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modelShow = false">{{
          $t("form.cancleBtn")
        }}</el-button>
        <el-button type="primary" :loading="loading" @click="onSubmit">{{
          $t("form.sureBtn")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  ProductDataApi,
  ProductSelectApi,
  ProductInApi,
  ProductUpApi,
} from "@/api";
import { cloneDeep } from "loadsh";

export default {
  name: "catalogue",
  data() {
    return {
      form: {},
      form_1: {
        value: "",
        type: "",
      },
      editForm: {
        user: "",
        sku: "",
        ProductCN: "",
        ProductMX: "",
        position: "",
        price: "",
        remark: "",
        variantes: "",
        state: "",
      },
      modelShow: false,
      queryKey: "",
      tableData: [],
      page: {
        start: 1,
        limit: 10,
      },
      total: 0,
      loading: false,

      rules: {
        sku: [{ required: true, message: "请输入商品sku", trigger: "blur" }],
        ProductCN: [
          { required: true, message: "请输入商品中文名", trigger: "blur" },
        ],
        ProductMX: [
          { required: true, message: "请输入商品墨西哥名", trigger: "blur" },
        ],
        position: [
          { required: true, message: "请输入仓库位置", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入单价", trigger: "blur" }],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
        variantes: [
          { required: true, message: "是否是变体", trigger: "change" },
        ],
        state: [{ required: true, message: "请选择状态", trigger: "change" }],
      },
    };
  },
  created() {
    this.getDataList();
  },
  watch: {
    modelShow(value) {
      if (!value) {
        delete this.editForm.id;
        this.resetForm();
      }
    },
  },
  methods: {
    async getDataList(type = 1) {
      let params = cloneDeep({
        ...this.page,
        start: this.page.start - 1,
      });
      if (type == 2) {
        if (this.form_1.value && this.form_1.type) {
          params[this.form_1.type] = this.form_1.value;
          const { data, total } = await ProductSelectApi(params);
          this.tableData = data;
          this.total = total;
        } else {
          type = 1;
        }
      }
      if (type == 1) {
        const { data, total } = await ProductSelectApi(params);
        this.tableData = data;
        this.total = total;
      }
    },
    handleSizeChange(e) {
      this.page.limit = e;
      this.getDataList();
    },
    handleCurrentChange(e) {
      this.page.start = e;
      this.getDataList();
    },
    handleClick(row) {
      this.editForm = cloneDeep({
        ...row,
        xn_id: new Date().getTime(),
      });
      this.modelShow = true;
    },
    async onSubmit() {
      const result = await this.$refs["formRef"].validate();
      if (!result) {
        return;
      }
      this.loading = true;
      try {
        delete this.editForm.LastDate;
        if (Object.prototype.hasOwnProperty.call(this.editForm, "xn_id")) {
          await ProductUpApi(this.editForm);
        } else {
          await ProductInApi(this.editForm);
        }
        this.getDataList();
        this.$message.success(this.editForm.xn_id ? "修改成功" : "新增成功");
        this.modelShow = false;
        this.loading = false;
      } catch (error) {
        this.loading = false;
      }
    },
    resetForm() {
      this.$refs["formRef"].resetFields();
      Object.keys(this.editForm).forEach((key) => {
        this.editForm[key] = "";
      });
    },
  },
};
</script>

<style lang="scss" scoped src="./catalogue.scss"></style>
